<template>
  <div id="docOrder">
    <!--  支付类型选择 -->
    <div class='mc1' v-show='isdocType' @click.stop='isdocType=false'>
      <div class='duration' @click.stop='isdocType=true'>
        <div class='top'>
          <a @click.stop='isdocType=false'>取消</a>
          <a @click.stop='sureDocType'>确定</a>
        </div>
        <mt-picker :slots="slotsDocType" @change="onValuesChangeDocType"></mt-picker>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>加单列表</div>
    </header>
    <div class="nav">
      <div class="active" @click='tabToggle(0,sentPage,"click")'>
        <a class="">
          <b>已完成订单</b>
        </a>
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
        <a class="">
          <b>未完成订单</b>
        </a>
      </div>
    </div>
    <div class="swipe">
      <div class='mc' v-if="list.length<1">
        <!-- <img src="../../../image/no_collection@2x.png" width='110' alt=""> -->
        <p>您还没有相关的订单</p>
      </div>
      <ul class="addorder">
        <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
          <li v-for="(item,index) in list" :key='index' v-if='item.status == "unpay"' class="unpay">
            <a>
              <ul>
                <li style="padding-top: 7px;">
                  <span class='ellipsis'> 订单号:{{item.order_num.split('*')[1]}}</span>
                </li>
                <li style="color: rgba(0, 0, 0, 0.3);font-size: 12px">
                  {{item.pay_time?item.pay_time : item.time}}
                </li>
                <li style="color: rgb(67,216,180);font-size: 14px">
                  {{item.total_price}}元
                </li>

                <li style="justify-content: space-between;margin-top:7px;display: flex;
                padding-right: 15px;">
                  <a @click.stop="cancelOrder(item)" style="margin-right: 5px;" class="chakan">取消订单</a>
                  <a @click.stop='goOrderDetails(item)' class="chakan">查看订单</a>
                  <a @click.stop='goPay(item)' v-show='item.status == "unpay"&&user=="doctor"' class="chakan" style="background: rgb(67, 216, 180);color: #fff">付款</a>
                </li>
              </ul>
            </a>
          </li>
          <li v-for="(item,index) in list" :key='index' v-if='item.status == "pay"' class="pay">
            <a>
              <ul>
                <li style="margin: 13px 0px 3px;padding-top: 3px;">
                  <span class='ellipsis'> 订单号:{{item.order_num.split('*')[1]}}</span>
                </li>
                <li style="color: rgba(0, 0, 0, 0.3);font-size: 12px">
                  <span class='finish'>{{item.pay_time?item.pay_time : item.time}}</span>
                </li>
                <li style="justify-content: space-between;margin-top:7px;display: flex;
                padding-right: 15px;">
                  <span style="color: rgb(67,216,180);font-size: 14px;">{{item.total_price}}元</span>
                  <a @click.stop='goOrderDetails(item)' class="chakan">查看订单</a>
                </li>
              </ul>
            </a>
          </li>
        </Loadmore>
      </ul>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore,
    MessageBox
  } from 'mint-ui';
  export default {
    data() {
      return {
        isdocType: false, //是否显示就诊类型选择
        order_num: '',
        total_price: '',
        slotsDocType: [{
          values: ['微信', '支付宝'],
          className: 'slot1',
          textAlign: 'center'
        }, ],

        list: [],
        userid: '',
        type: '已完成',
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        user: '', //判断入口 医生or诊室
        old_order_num: '',

      }
    },
    components: {
      Loadmore,
    },
    filters: {

    },
    methods: {
      goBack() {
        this.$router.back();
      },
      onValuesChangeDocType(picker, values) {
        this.valuesDocType = values[0];
      },
      sureDocType() {
        if (this.valuesDocType == '微信') {
          this.isdocType = false;
          const data = {
            order_num: this.order_num,
            total_fee: this.total_price,
            des: '牙医加单'
          };
          this.$api.post(this.$api.baseURL2, "/android_wxpay", data, r => {
            var params = {
              partnerid: r.data.mch_id, // merchant id 
              prepayid: r.data.prepay_id, // prepay id 
              noncestr: r.data.nonce_str, // nonce 
              timestamp: r.data.timestamp, // timestamp 
              sign: r.data.sign, // signed string 
            };
            Wechat.sendPaymentRequest(params, function () {
            this.$utils._toast('支付成功');
          }, function (reason) {
            this.$utils._toast(reason);
          });
          }, err => {
            console.log(err);
          }, false, false)



        } else if (this.valuesDocType == '支付宝') {
          //   支付宝支付
          this.isdocType = false;
          let data = {
            order_num: this.order_num,
            subject: '牙医加单',
            amount: this.total_price,
          };
          this.$api.post(this.$api.baseURL2, "/alipay_app", data, r => {
            var params = r.data.data;
            cordova.plugins.alipay.payment(params, function () {
              this.$utils._toast('支付成功');
            }, function (reason) {
              this.$utils._toast(reason);
            });
          }, err => {
            console.log(err);
          }, false, false)
        }
      },


      // 支付宝支付
      goPay(item) {
        let title = JSON.parse(item.gids)[0].name;
        this.isdocType = true //是否显示就诊类型选择
        this.order_num = item.order_num
        this.total_price = item.total_price
      },
      // 加单详情
      goAdd(item) {
        this.$router.push({
          name: 'toolsSelect',
          query: {
            docOrderId: item.id
          }
        });
      },
      // 订单详情
      goOrderDetails(item) {
        this.$router.push({
          name: 'addOrderDetails',
          query: {
            user: this.user,
            type: this.type,
            id: item.id
          }
        });
      },
      cancelOrder(item) {
        MessageBox.confirm('确定要取消该订单?').then(action => {
          var params = {
            id: item.id
          }
          this.$api.post(this.$api.baseURLSchool, "updatedata/doctor_order_add/del", params, r => {
            if (r.data.ret == 1) {
              this.tabToggle(1, this.sentPage);
            }
          }, err => {
            console.log(err);
          })

        }, r => {
          // console.log(0);
        });

      },
        // 登录拦截
        isLogin() {
        this.userid = localStorage.getItem("loginMobile");
        if (!this.userid) {
          this.$router.push({
            name: 'login1'
          })
          return false;
        } else {
          return true;
        }
      },
      //判断入口 是医生的订单管理 还是诊室的订单管理 获取对应状态的订单列表
      tabToggle(i, params, click) { //0已完成 1未完成
        $('.nav div').eq(i).addClass('active').siblings().removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
        }
        this.userid = localStorage.getItem("loginMobile");
        if (i == 0) {
          this.type = '已完成';
          this.$api.post(this.$api.baseURLSchool, "selectlist/doctor_order_add?old_order_num=" + this.old_order_num +
            "&status=pay", params, r => {
              this.totalNum = r.data.records;
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }

              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
            }, err => {
              console.log(err);
            })
        }

        if (i == 1) {
          this.type = '未完成';
          this.list = [];
          this.$api.post(this.$api.baseURLSchool, "selectlist/doctor_order_add?old_order_num=" + this.old_order_num +
            "&status=unpay", params, r => {
              this.totalNum = r.data.records;
              if (r.data.ret == -3) {
                localStorage.clear();
                this.isLogin()
              }
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
            }, err => {
              console.log(err);
            })
        }
      },
      //上拉加载下一页
      loadBottom() {
        (this.sentPage.page) ++;
        if (this.type == '已完成') {
          setTimeout(() => {
            this.tabToggle(0, this.sentPage);
          }, 20);
        } else if (this.type == "未完成") {
          setTimeout(() => {
            this.tabToggle(1, this.sentPage);
          }, 20);
        }
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },

    },
    created() {
      this.user = this.$route.query.user;
      this.old_order_num = this.$route.query.old_order_num;
      this.tabToggle(0, this.sentPage);
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    img {
      display: block;
      margin: 0 auto;
    }

    p {
      padding-top: 10px;
      text-align: center;
    }
  }


  .ellipsis {
    width: 255px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 13px;
  }
  .mc1 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99;

    .duration {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 235px;
      background: #fff;

      div.top {
        display: flex;
        height: 45px;
        line-height: 45px;
        background: linear-gradient(to bottom, #7ad8ad,  #67b296);
        padding: 0 25px;

        a {
          flex: 1;
          font-size: 17px;
          color: #fff;

          &:last-child {
            text-align: right;
          }
        }
      }
    }
  }

</style>
